<template>
  <div class="rank-container card-area">
    <div class="card-title">
      <h3>{{ cardTitle }}事件排名TOP5</h3>
    </div>
    <div class="ranking-area">
      <ul class="ranking-header">
        <li>排名</li>
        <li>攻击组织</li>
        <li>事件数量</li>
      </ul>
      <ul class="ranking-content">
        <li v-for="(item, index) in rankData" :key="index" class="ranking-item">
          <div>
            <div class="top" :class="`_${index+1}`">{{index + 1}}</div>
          </div>
          <div class="name" :title="item.viewName">{{item.viewName}}</div>
          <div class="text">{{item.eventNum}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
const chartData = [
  {
    "viewName": "柠檬白鸭",
    "eventNum": 9
  },
  {
    "viewName": "柠檬黑鸭",
    "eventNum": 7
  },
  {
    "viewName": "柠檬鸭",
    "eventNum": 7
  },
  {
    "viewName": "APT-C-53(Gamaredon)",
    "eventNum": 5
  },
  {
    "viewName": "silverfox",
    "eventNum": 3
  },
  {
    "viewName": "MuddyWater",
    "eventNum": 2
  },
  {
    "viewName": "APT-C-20(APT28)",
    "eventNum": 2
  },
  {
    "viewName": "Lotus Blossom",
    "eventNum": 2
  },
  {
    "viewName": "APT-C-00(海莲花)",
    "eventNum": 1
  },
  {
    "viewName": "APT-C-26(Lazarus)",
    "eventNum": 1
  }];
import {orderBy} from 'lodash';

export default {
  name: "RankArea",
  data() {
    return {
      rankData: []
    }
  },
  props: {
    viewType: {
      type: Number,
      required: true,
    },
    datePickerValue: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  computed: {
    cardTitle() {
      switch (this.viewType) {
        case 2:
          return '攻击组织';
        case 3:
          return '恶意域名';
        case 4:
          return '恶意IP';
      }
    }
  },
  methods: {
    initComp() {
      console.log('排行组件获取数据了------', this.datePickerValue);
      new Promise((resolve) => {
        resolve(true);
      }).then(() => {
        this.formatData(orderBy(chartData, ['eventNum'], ['desc']));
      })
    },
    formatData(data) {
      if (data.length > 5) {
        this.rankData = data.splice(0, 5);
      } else {
        this.rankData = data;
      }
    },
  }
}
</script>

<style lang="scss">
.rank-container.card-area {
  width: 430px;
  height: 300px;
  border: 1px solid #ccc;
  border-radius: 10px;

  .card-title {
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;

    > h3 {
      color: #808191;
      font-size: 16px;
      font-weight: bold;
    }
  }

  .ranking-area {
    width: 100%;
    height: 253px;
    padding: 0 20px 15px 20px;
    font-size: 15px;

    .ranking-header {
      display: flex;
      height: 35px;
      align-items: center;
      color: #8e97aa;
      font-weight: bold;
      border-bottom: .5px solid #e1e3ed;

      > li {
        flex: 0 0 33%;
        padding: 0 5px;
      }
    }

    .ranking-item {
      display: flex;
      height: 35px;
      border-bottom: .5px solid #e1e3ed;
      align-items: center;
      .top {
        height: 20px;
        width: 20px;
        padding: 4px;
        border-radius: 4px;
        background: #426bda;
        color: #fff;
        text-align: center;
        line-height: 14px;
        &._1{
          background: #eb5f5d;
        }
        &._2{
          background: #f69e3b;
        }
      }
      .name {
        white-space: nowrap; /* 禁止文本换行 */
        overflow: hidden; /* 隐藏超出容器的内容 */
        text-overflow: ellipsis; /* 超出部分显示为省略号 */
      }
      .text {
        font-weight: bold;
      }
      > div{
        flex: 0 0 33%;
        padding: 0 5px;
      }
    }
  }
}
</style>